<template>
  <div :class="['flow-process-node__normal-content', readonly ? 'cursor-default' : null, data.type == 'cost' ? 'flow-cost':'', store.currFlow.type == data.type && store.currFlow.id == data.id ? 'active':'']">
    <div :class="{'flow-process-node__normal-content-title':  true,}">
      <i :class="['iconfont', data.icon]" ></i> {{ data.title || '' }}
    </div>
    <div class="flow-process-node__normal-content-data" v-if="false">
      <template v-if="data.content">
        <el-tooltip :content="data.content" :disabled="disabled" popper-class="flow-process-tooltip">
         <span class="flow-process-node__normal-content-data__text" @mouseenter="handleMouse($event)">
            {{ data.content}}
         </span>
        </el-tooltip>
      </template>
      <template v-else>
        <div class="flow-process-node__normal-content-data__text placeholder">{{ data.placeholder ||  '' }}</div>
      </template>
      <img v-if="!readonly" class="flow-process-node__normal-content-data__icon" src="../assets/svg/arrow.svg" alt="" />
    </div>
  </div>
</template>

<script>

import { store } from '../constant'
import { textIsBeyond } from "../utils";
export default {
  name: 'flow-process-normal-node-content',
  data() {
    return {
      readonly: store.readonly,
      nodeThroughIds: store.nodeThroughIds,
      nodeCurrentNodesIds: store.currentNodeIds,
      disabled: false,
      store
    }
  },
  props: {
    data: {
      type: Object,
      default: null
    }
  },
  computed: {
    currentNodeExistInNodeThroughId() {
      return this.nodeThroughIds.concat(this.nodeCurrentNodesIds).includes(this.data?.id)
    },
  },
  methods: {
    handleMouse(e)  {
      this.disabled = textIsBeyond(e);
    }
  }
}
</script>

<style lang="scss" scoped>
.flow-process-node__normal-content {
  width: 220px;
  border-radius: 8px;
  border: 1px solid #CBD6E2;
  background-color: #fff;
  border-radius: 8px;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  width: 208px;
  height: 48px;
  border-radius: 4px;
  line-height: 8px;
  .iconfont {
    color: $color-primary;
    margin-right: 4px;
    font-size: 14px;
  }
  &.active {
    background: $color-primary-light-1;
    border: 1px solid $color-primary;
  }
  &-title {

    position: relative;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
    color: #262626;
    word-break: break-all;
    box-sizing: border-box;
    padding: 0 12px;
    height: 48px;
    line-height: 48px;
    width: 195px;
    @include text-ellipsis();

    &.start-node {
      background: #7B93A8;
    }

    &.end-node{

    }

    &.process-node{
        background: $color-primary;
    }
    &.approve-node{
        background: #FF8800;
    }
    &.carbon-copy-node{
      background: #7173DF;
    }
  }

  &-data {
    width: 100%;
    display: flex;
    min-height: 32px;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    margin-top: 10px;
    //background: rgba(0, 0, 0, 0.03);
    border-radius: 4px;

    &__text {
      //min-height: 60px;
      max-width: calc(220px - 32px);
      color: #262626;
      font-size: 14px;
      //line-height: 32px;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;

      &.placeholder {
        color: #8C8C8C;
      }
    }

    &__icon {
      width: 16px;
    }
  }

  .through-icon{
    position: absolute;
    right: -24px;
    top: 2px;
  }
  .icon-check-circle{
    color: #52c41a;
  }
  .icon-shenpizhong{
    color: rgb(250, 174, 20);
  }
}
.flow-cost {
  background: #F0F2F5;
  border: 1px solid #F0F2F5;
  .iconfont{
    color: #67C23A !important;
  }
}
</style>
